<template>
    <div class="personalHeader">
        <div class="headerSwiper">
            <swiper :list="personalData.personalImgList" v-model="index" dots-position="center" :aspect-ratio="360/360" @click.native="handlePreviewClick(index)"></swiper>
        </div>

        <div class="headerPersonal">
            <div class="personal-name">啦啦啦啦</div>        
            <div class="personal-data">
                <span class="personal-sex">
                    <svg class="icon" aria-hidden="true" style="width: .42rem;height: .42rem;vertical-align: -0.1rem">
                        <use xlink:href="#icon-xingbienv"></use>
                    </svg>
                </span>
                <span class="personal-age">90后</span>
                <span class="personal-couple">单</span>
                <span class="personal-occupation">本科·经理/互联网信息</span>
            </div>
            <div class="personal-address">
                <svg class="icon" aria-hidden="true" style="width: .42rem;height: .42rem;vertical-align: -0.1rem">
                    <use xlink:href="#icon-dizhi"></use>
                </svg>
                广东省广州市天河区
            </div>        
        </div>

        <div v-transfer-dom>
            <previewer :list="personalData.personalImgPreview" ref="previewer" :options="options" @on-index-change="logIndexChange"></previewer>
        </div>
    </div>
</template>

<script>
import { Flexbox, FlexboxItem, Previewer, TransferDom,Swiper } from 'vux'
export default {
    name: "PersonalHeader",
    directives: {
        TransferDom
    },
    components: {
        Flexbox, 
        FlexboxItem,
        Previewer, 
        TransferDom,
        Swiper
    },
    props: {
        personalData: Object
    },
    data () {
        return {
            
            options: {
                getThumbBoundsFn (item,index) {
                // find thumbnail element
                let thumbnail = document.querySelectorAll('.vux-img')[index]
                console.log(thumbnail)
                // get window scroll Y
                let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
                // optionally get horizontal scroll
                // get position of element relative to viewport
                let rect = thumbnail.getBoundingClientRect()
                // w = width
                return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
                // Good guide on how to get element coordinates:
                // http://javascript.info/tutorial/coordinates
                }
            },
            index: 0,

        }
    }, 
    methods: {

        handlePreviewClick (imgId) {
            this.$refs.previewer.show(0,imgId)
            
        },
        logIndexChange (arg) {
            this.index = arg.currentIndex
            console.log(arg)
        }
    },
}

</script>

<style lang="stylus" scoped>
.personalHeader
    overflow:hidden
    background-color: #fff
    margin-bottom: .2rem
    .headerSwiper
        margin: .2rem
        border-radius: .1rem
        overflow:hidden
    .headerPersonal
        margin: .2rem
        .personal-name
            font-size: .4rem
            margin-bottom: .1rem
        .personal-data
            margin-bottom: .2rem
            .personal-age
                height: .4rem
                line-height: .4rem
                padding: .05rem .1rem
                color: #fff
                background-color: #ffa2d9
                border-radius: .08rem
                margin-right: .1rem
            .personal-couple
                padding: .04rem
                background-color: #ff9494
                border-radius: 50%
                color: #fff
                margin-right: .1rem
        .personal-address
            color: #bbbbbb
        
            

</style>